<!--

  订单列表页面， 数据渲染 
   业务： 进件

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/29 09:17
-->
<template>
  <!-- 草稿 灰色 失败红色 审核中 黄色 -->
  <!-- 列表卡片 -->
  <view class="apply-card">
    <view class="apply-title" @tap="toViewPage">
      <view class="pay-img-wrapper flex-center" :style="{ backgroundColor: record.bgColor }">
        <image :src="props.record.icon" mode="scaleToFill" />
      </view>
      <view class="apply-title-wrapper">
        <view class="apply-title-info">
          <text class="single-text-beyond" style="width: 340rpx">{{ props.record.mchFullName }}</text>
          <view class="apply-state">
            <text>{{ stateList[record.state]?.text }}</text>
            <view class="apply-dot" :style="{ backgroundColor: stateList[record.state]?.bgColor }"></view>
          </view>
        </view>
        <view class="apply-time">{{ props.record.createdAt }}</view>
      </view>
    </view>
    <view class="apply-info-title" @tap="toViewPage">
      <view class="title">进件渠道</view>
      <view class="info">{{ props.record.ifName }}</view>
    </view>
    <view class="apply-info-title" @tap="toViewPage">
      <view class="title">进件单号</view>
      <view class="info">{{ props.record.applyId }}</view>
    </view>
    <view class="apply-button">
      <view
        v-if="
          ent.has('ENT_MCH_APPLYMENT_SIGN') && (props.record.state == 1 || props.record.state == 2 || props.record.state == 4 || props.record.state == 5 || props.record.state == 6)
        "
        class="sign flex-center"
        hover-class="touch-hover"
        @tap="toSignPage"
      >
        签约开通
      </view>
      <view
        v-if="ent.has('ENT_MCH_APPLYMENT_GET_INFO') && (props.record.state == 1 || props.record.state == 4 || props.record.state == 5)"
        class="new-state flex-center"
        hover-class="touch-button"
      >
        获取最新状态
      </view>
	  
	  <view v-if="ent.has('ENT_MCH_APPLYMENT_ADD')" class="new-state flex-center" hover-class="touch-button" @tap='toShowSelectIfCode()'>创建副本</view>
    </view>
	
	
	
	<!-- 选择支付 接口 -->
	<JeepayPopupListSelect
	  ref="selectIfcodeRef"
	  title='请选择渠道'
	  :reqTableDataFunc="reqTableDataByIfcodeFunc"
	  :fields="{ key: 'ifCode', left: 'ifName', right: 'ifCode' }"
	  @confirm="confirmIfCode"
	>
	
	<!-- 小程序， 插槽不生效， 待排查！  TODO -->
	<!-- 详见： https://ask.dcloud.net.cn/question/158765  -->
	<!-- JeepayPopupListSelect.js  修改 "content-" + i0,  改为： content 即可。    -->
	
	 <!-- #ifdef APP-PLUS || H5 -->
		  <template #content="{record}">
			   <view class="pay-wrapper">
				 <view class="pay-info">
				   <view class="pay-logo flex-center" :style="{ backgroundColor: record.bgColor }">
					 <image :src="record.icon" mode="scaleToFill" />
				   </view>
				   <view>
					 <view class="pay-title">{{ record.ifName }}</view>
				   </view>
				 </view>
			   </view>
		  </template>
		  <!-- #endif -->
	
	</JeepayPopupListSelect>
	
	
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
import datamap from '@/commons/utils/datamap.js'
import ent from '@/commons/utils/ent.js'
import ak from '@/commons/utils/ak.js'
import { $getAllAllowApplymentIfCodeList } from "@/http/apiManager.js"

const selectIfcodeRef = ref()

const vdata = reactive({
	addIfCodeList: [], // 可以选择的接口集合
})

function toH5ApplyOptionPage(applyId, configPage) {
  uni.navigateTo({ url: `/pageApply/applyDetailH5ApplyOption?applyId=${applyId}&configPage=${configPage}` })
}

// 去进件详情 / 修改页
function toViewPage() {
  let isView = 1

  if ([0, 3, 8].indexOf(props.record.state) >= 0) {
    isView = 0
  }

  go.to('PAGES_APPLYMENT_H5_DETAIL', { applyId: props.record.applyId, isView: isView })
}

// 签约开通
function toSignPage() {
  go.to('PAGES_APPLYMENT_H5_OPTION', { applyId: props.record.applyId, configPage: 'NEXT_BIZS' })
}

// 定义传入属性
const props = defineProps({
  record: { type: Object, default: () => {} }, // 渲染对象
})
const stateList = reactive([
  {
    text: '草稿', //0
    bgColor: '#D9D9D9',
  },
  {
    text: '审核中', //1
    bgColor: '#FFCC66',
  },
  {
    text: '已开通', //2
    bgColor: '#18BC73',
  },
  {
    text: '申请被驳回', //3
    bgColor: '#FF4D5B',
  },
  {
    text: '待验证', //4
    bgColor: '#FFCC66',
  },
  {
    text: '待签约', //5
    bgColor: '#2980FD',
  },
  {
    text: '', //6 占位
    bgColor: '',
  },
  {
    text: '等待预审', //7
    bgColor: '#FFCC66',
  },
  {
    text: '预审拒绝', //8
    bgColor: '#FF4D5B',
  },
])



// 打开选择渠道页面
function toShowSelectIfCode(){
    ak.go.to('PAGES_APPLYMENT_SELECETDPAY',{applyId: props.record.applyId})
	return
	$getAllAllowApplymentIfCodeList().then(({bizData}) => {
		vdata.addIfCodeList = bizData  
		selectIfcodeRef.value.open()
	})
}

// 请求可以选择的支付渠道 
function reqTableDataByIfcodeFunc(){
	// 模拟请求数据 
	return Promise.resolve({ bizData: { records: vdata.addIfCodeList, hasNext: false }})
}

function confirmIfCode(selected){
	if(!selected){
		ak.infoBox.showToast('请选择进件渠道')
		return false;
	}
	selectIfcodeRef.value.close()
	ak.go.to('PAGES_APPLYMENT_H5_DETAIL', {isView: 0, ifCode: selected.ifCode, copyInfoSourceApplyId: props.record.applyId })
}


function toCopyPage(){
}



</script>

<style lang="scss" scoped>
//   列表卡片样式
.apply-card {
  padding: 0.1rpx 30rpx;
  padding-bottom: 10rpx;
  margin: 20rpx;

  background-color: #fff;
  border-radius: $J-b-r32;
  .apply-title {
    display: flex;
    margin-top: 30rpx;
    margin-bottom: 40rpx;
    font-size: 30rpx;
    .pay-img-wrapper {
      margin-right: 20rpx;
      width: 90rpx;
      height: 90rpx;
      border-radius: 20rpx;
      image {
        width: 65%;
        height: 65%;
      }
    }
    .apply-title-wrapper {
      flex: 1;
      .apply-title-info {
        display: flex;
        justify-content: space-between;
        height: 40rpx;
        .apply-state {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          color: #999;
          white-space: nowrap;
          text {
            transform: translateX(-10rpx);
          }
          .apply-dot {
            width: 20rpx;
            height: 20rpx;
            border-radius: 50%;
            background-color: #2980fd;
          }
        }
      }
      .apply-time {
        color: #999;
        margin-top: 10rpx;
        font-size: 26rpx;
      }
    }
  }

  .apply-info-title {
    margin: 20rpx 0;
    display: flex;
    font-size: 26rpx;
    .title {
      color: #808080;
    }
    .info {
      text-indent: 56rpx;
    }
  }
  .apply-button {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20rpx;
    view {
      font-size: 26rpx;
      font-weight: 500;
      height: 62rpx;
      border-radius: 12rpx;
    }
    .sign {
      width: 164rpx;
      border: 1rpx solid #d3d3d4;
    }
    .new-state {
      margin-left: 20rpx;
      width: 216rpx;
      color: #fff;
      background: $jeepay-bg-primary;
    }
  }
}

.pay-wrapper {
  display: flex;
  align-items: center;
  height: 170rpx;
  .dot {
    position: relative;
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    background-color: #d7d8d9;
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50%;
      height: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: #fff;
    }
  }
  .dot-active {
    background-color: #2980fd;
  }
  .pay-info {
    display: flex;

    .pay-logo {
      margin: 0 20rpx 0 0rpx;
      width: 90rpx;
      height: 90rpx;
      border-radius: $v-b-r20;
      background-color: #07112d;
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
    .pay-title {
      font-size: 30rpx;
      font-weight: 400;
    }
  }
}


</style>
